<template>
    <div class="uiue-card">
        <div class="tit" v-if="isblack === '1'">移动端{{ mdname }}</div>
        <div class="tit" v-else>{{ title }}{{ mdname }}</div>
        <a-button type="primary" style="margin: 10px 0" @click="exportList" :loading="uploading">下载</a-button>
        <a-table :dataSource="data.dataSource" :columns="columns" :loading="loading" :pagination="false" size="middle"
            bordered>

        </a-table>
        <!-- isblack 0灰名单   1黑名单   2白名单 -->
        <div class="box-pagin">
            <a-pagination show-size-changer show-quick-jumper :show-total="(total) => `共 ${total} 条`"
                v-model:current="searchFormState.current" v-model:pageSize="searchFormState.size" :total="total"
                @change="pageNumberChange" />
        </div>
    </div>
</template>

<script setup name="GrayscaleTableLo">
import grayscaleApi from '@/api/biz/grayscaleApi'
import tool from '@/utils/tool'
import { message } from 'ant-design-vue'
const datas = inject('detailDate')
const uploading = ref(false)
const loading = ref(false)
const props = defineProps({
    configKey: {
        type: String
    },
    isblack: {
        type: String
    }
})
const config = [
    { txt: 'pc', key: '1', subTable: 'appInfoPcPropertiesAddParam' },
    { txt: 'html5', key: '2', subTable: 'appInfoAppPropertiesAddParam' },
    { txt: 'android', key: '3', subTable: 'androidPropertiesList' },
    { txt: 'ios', key: '4', subTable: 'iosPropertiesList' },
    { txt: 'umap', key: '5', subTable: 'umapPropertiesList' },
    { txt: 'html5', key: '6', subTable: 'appPropertiesList' },
]
// grayscaleType 名单类型 1黑名单 0灰名单 2白名单
// appId 应用id
// propertyType 属性类型  pc，app，ios，android, umap
const params = computed(() => {
    return {
        grayscaleType: props.isblack,
        // 如有子表id就传，没有传‘’
        appId: datas.value.appId ? datas.value[config.find((v) => v.key === props.configKey).subTable].id : '',
        // 中间表id
        propertyId: datas.value.id,
        appCode: datas.value.appCode,
        appVersion: datas.value[config.find((v) => v.key === props.configKey).subTable].appVersion || '',
        propertyType: config.find((v) => v.key === props.configKey).txt,
        upgrade: tool.session.get('approvalType') === '3' ? '1' : '' // 如果是升级传1
    }
})
// 列表搜索条件
let searchFormState = reactive({
    current: 1,
    size: 10,
    grayscaleAccounts: ''
})
let searchFormState1 = reactive({
    current: 1,
    size: 10,
    grayscaleAccounts: ''
})
let total = ref(0)
const title = computed(() => {
    return props.configKey === '1' ? '门户端' : '移动端'
})
const mdname = computed(() => {
    let str = ''
    switch (props.isblack) {
        case '0':
            str = '灰度名单'
            break
        case '1':
            str = '黑名单'
            break
        case '2':
            str = '白名单'
            break
        default:
            break
    }
    return str
})
onMounted(() => {
    loadData()
})
const pageNumberChange = (page, pageSize) => {
    searchFormState.current = page
    searchFormState.size = pageSize
    loadData()
}
const loadData = (search) => {
    // const cappId = tool.data.get('currentName') === '提交上线材料' ? '1' : '2'
    let obj = { ...searchFormState, ...params.value, cappId: '2' }
    loading.value = true
    grayscaleApi.getPage(obj).then((res) => {
        const { records, total: num } = res
        if (search != 1) {
            data.dataSource = records
        }
        data.dataSourceFz = records
        total.value = num
        loading.value = false
    })
}
const data = reactive({
    dataSource: [],
    dataSourceFz: []
})
// const columns = ref([
// 	{
// 		title: '用户',
// 		dataIndex: 'grayscaleName',
// 		key: 'grayscaleName'
// 	},
// 	{
// 		title: '账号',
// 		dataIndex: 'grayscaleAccounts',
// 		key: 'grayscaleAccounts'
// 	},
// 	{
// 		title: '操作',
// 		dataIndex: 'operation'
// 	}
// ])
const columns = computed(() => {
    let colm = [{
        title: '用户',
        dataIndex: 'grayscaleName',
        key: 'grayscaleName'
    },
    {
        title: '账号',
        dataIndex: 'grayscaleAccounts',
        key: 'grayscaleAccounts'
    }]
    // let obj = {
    //     title: '操作',
    //     dataIndex: 'operation'
    // }
    // let doneStatus = tool.session.get('doneStatus')
    // if (doneStatus && doneStatus === '0') {
    //     if ((currentName?.value === '申请人提交生产材料' || currentName?.value === '运营组审核') && props.isblack === '0') {
    //         colm.push(obj)
    //     }
    //     if (props.isblack === '1' || props.isblack === '2') {
    //         colm.push(obj)
    //     }
    // }

    return colm
})




// 下载名单
const exportList = () => {
    if (data.dataSource.length == 0) {
        message.warning('数据不存在，无法下载')
        return
    }
    uploading.value = true
    grayscaleApi
        .exportList(params.value)
        .then((res) => {
            const blob = new Blob([res.data], { type: 'application/octet-stream;charset=UTF-8' })
            const contentDisposition = res.headers['content-disposition']
            const patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
            const $link = document.createElement('a')
            $link.href = URL.createObjectURL(blob)
            $link.download = decodeURIComponent(patt.exec(contentDisposition)[1])
            $link.click()
            document.body.appendChild($link)
            document.body.removeChild($link) // 下载完成移除元素
            window.URL.revokeObjectURL($link.href) // 释放掉blob对象
            uploading.value = false
        })
        .catch(() => {
            uploading.value = false
        })
}
</script>

<style lang="less" scoped>
.btns {
    color: var(--primary-color);
    border-color: var(--primary-color);
    margin-top: 24px;
}

.box-pagin {
    margin-top: 24px;
    text-align: right;
}
</style>
